import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入store对象
import store from '@/store/index'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/home',
    component: () => import('@/views/layout/myIndex'),
    children: [
      {
        path: 'home',
        component: () => import('@/views/home/myIndex')
      },
      {
        path: 'user-info',
        component: () => import('@/views/user/myIndex')
      },
      {
        path: 'user-avatar',
        component: () => import('@/views/user/userAvatar')
      },
      {
        path: 'user-pwd',
        component: () => import('@/views/user/userPwd')
      },
      {
        path: 'art-cate',
        component: () => import('@/views/article/artCate')
      },
      {
        path: 'art-list',
        component: () => import('@/views/article/artList')
      },
      {
        path: 'cloud_album',
        component: () => import('@/views/album/cloudAlbum')
      },
      {
        path: 'message_board',
        component: () => import('@/views/messageboard/MessageBoard')
      },
      {
        path: 'effect',
        component: () => import('@/views/effect/myEffect')
      },
      {
        path: 'item/first',
        component: () => import('@/views/item/myFirst')
      },
      {
        path: 'item/thesecond',
        component: () => import('@/views/item/myThesecond')
      },
      {
        path: 'item/third',
        component: () => import('@/views/item/myThird')
      }
    ]
  },
  {
    path: '/login',
    component: () => import('@/views/login/myIndex')
    // webpack提供import函数来路由懒加载导入组件
    // 页面切换到/ reg, 才会去加载对应的组件代码
    // 好处:让首页加载体积更新,打开更快
  }
]

const router = new VueRouter({
  routes
})
// 无需验证token的页面
const whiteList = ['/login']
// 全局导航守卫
// 浏览器第一次打开项目,会触发一次全局前置路由导航守卫函数
router.beforeEach((to, from, next) => {
  // to表示-将要 访问 的信息对象
  // from表示-将要 离开 的信息对象
  // next函数,调用表示放行
  // store.dispatch('getUserInfoActions') // 还存在一个小问题,登录-》首页(没有问题),退出登录的时候又执行了一遍(相当没有token请求接口)
  // 解决如下代码:
  const token = store.state.token
  // console.log(store.state.userInfo.username)
  // console.log(!store.state.userInfo.username) // true

  // if (token && !store.state.userInfo.username) {
  // 有token但是没有用户信息, 才去请求用户信息保存到vuex里(在首页切换其它路由的时候,不需要请求接口)
  // 调用actions里方法请求数据
  // store.dispatch('getUserInfoActions')
  // 下次切换页面vuex里有用户信息数据就不会重复请求用户信息
  // }

  // 考虑到未登录时不可以访问其它页面路由,代码优化如下:
  // 知识点:next()如果强制切换路由地址,会再次走路由守卫再次去匹配路由表(触发递归)
  if (token) {
    // 登录了
    if (!store.state.userInfo.username) {
      store.dispatch('getUserInfoActions')
    }
    next()
  } else {
    // 未登录(强制跳转到登录页)
    // next('/login')
    // includes(值),作用:判断值是否在数组里出现过,出现过返回true
    if (whiteList.includes(to.path)) {
      // 未登录,可以访问的路由地址,则放行(路由全局前置守卫不会再次触发,而是匹配路由表,让组件挂载)
      next()
    } else {
      next('/login') // 这里再次触发全局导航守卫会进入if里面的next()
    }
  }
})
export default router
